<template>
    <div>
    <div class="title" style="  color: #100608 ;float: left;padding: 6px" >书籍进销存管理系统</div>
      <div style="float: right;">
        <el-dropdown @command="logout">
        <span class="el-dropdown-link" style="font-size: 25px">
          你好！{{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-switch-button">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
</template>

<script>
    export default {
        name: "TopNavMenu",
      data(){
          return{
            user:{
              name:this.$store.state.user.username,
              date: new Date()
            }
          }
      },
      mounted:function () {


      },

      methods:{
        logout () {
          var _this = this
          this.$axios.get('/logout').then(resp => {
            if (resp.data.code === 200) {
              // 前后端状态保持一致
              _this.$router.replace({path: '/login'})
              _this.$store.commit('logout')
            }
          })
        },


      }
    }
</script>

<style scoped>
  .homeRouterView {
    margin-top: 10px;
  }

  .homeWelcome {
    text-align: center;
    font-size: 30px;
    font-family: 华文行楷;
    color: #409eff;
    padding-top: 50px;
  }

  .homeHeader {
    background-color: #DCDFE6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    box-sizing: border-box;
  }

  .homeHeader .title {
    font-size: 30px;
    font-family: 华文行楷;
    color: #ffffff
  }

  .homeHeader .userInfo {
    cursor: pointer;
  }

  .el-dropdown-link img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    margin-left: 8px;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #100608;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
